<!DOCTYPE html>
<!-- CSS常用属性: font -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字体</title>

        <style type="text/css">

            .first {
                color: red ; /* 前景色(即文本颜色) */
                font-size: 100px ; /* 字体大小 */
                line-height: 150px ; /* 行高 */
                font-style: normal ; /* 字体风格: normal | italic */
                font-weight: bolder ; /* 文本粗细: lighter | normal | bold | bolder */
                font-family: 宋体 ; /* 文本对应的字体，比如 宋体、楷体、行书、雅黑 */
                border: 1px solid blue ;
            }

            .second {
                color: red ;
                font: italic bold 100px/150px 'Microsoft Yahei';
                border: 1px solid green ;
            }

            .third {
                color: red ;
                font: normal lighter 100px/150px 'Helvetica Neue',Helvetica,Arial,'Microsoft Yahei','Hiragino Sans GB','Heiti SC','WenQuanYi Micro Hei',sans-serif;
                border: 1px solid blue ;
            }
        </style>

    </head>
    <body>

        <div class="first">
            人杰地灵
            <br>
            俊彩星驰
        </div>

        <div class="second">人杰地灵</div>

        <div class="third">人杰地灵</div>
        
    </body>
</html>